<template>
  <div class="containerBox">
    <div class="box">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
</script>
<style lang="less" scoped>
.containerBox::after {
  content: '';
  width: 30%;
  height: 100%;
  background: linear-gradient(to left, rgb(68, 97, 114), rgb(130, 191, 201));
  animation: rotate linear 5s infinite;
  position: absolute;
  z-index: 100;
  transform: rotate(0deg);
  transform-origin: left bottom;
  margin-left: -15px;
  left: 50%;
  top: -50%;
}
.containerBox {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.box {
  background-color: rgb(2, 7, 19);
  border: 1px solid rgb(36, 50, 73);
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  z-index: 1001;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
    transform-origin: left bottom;
  }

  50% {
    transform: rotate(180deg);
    transform-origin: left bottom;
  }

  100% {
    transform: rotate(359deg);
    transform-origin: left bottom;
  }
}
</style>